<template>
  <header class="app-header">
    <a-button type="link">
      <h1 class="app-header-title">XRender设计生成器</h1>
    </a-button>
    <div class="app-header-right">
      <a-button
        type="link"
        icon="menu-unfold"
        @click="projectShow = true"
      >
        项目管理
      </a-button>
      <a-button
        type="link"
        :icon="tableShow ? 'table' : 'form'"
        @click="tableShow = !tableShow;$emit('switch')"
      >
        {{ tableShow ? '表格' : '表单' }}设计
      </a-button>
      <a-button v-for="item of links" :key="item.title" type="link" @click="clickHandler(item)">
        {{ item.title }}
      </a-button>
    </div>
    <Project :show.sync="projectShow"/>
  </header>
</template>

<script>
import Project from './components/project'

export default {
  name: 'AppHeader',
  components: {
    Project
  },
  data() {
    return {
      projectShow: false,
      tableShow: true,
      links: [
        {
          url: '',
          title: 'Docs'
        }
      ]
    }
  },
  methods: {
    clickHandler(item) {
      if (item.url) {
        window.open(item.url)
      }
    }
  }
}
</script>

<style scoped>
.app-header {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 1;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.app-header .app-header-title {
  font-size: 24px;
  color: #409eff;
}

.app-header .app-header-right {
  display: flex;
  align-items: center;
}

.app-header .app-header-right .el-link {
  margin-right: 20px;
}
</style>
